<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      id="quill-upload"
      class="avatar-uploader"
      :action="serverUrl"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload">
    </el-upload>
    <!--富文本编辑器组件-->
    <div style="display: inline-block;width: 100%">
      <el-row v-loading="quillUpdateImg">
        <quill-editor
          style="height: 400px"
          v-model="detailContent"
          ref="myQuillEditor"
          :options="editorOption"
          @ready="onEditorReady($event)">
        </quill-editor>
      </el-row>
    </div>
  </div>
</template>

<script>
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 2}],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],
    [{'indent': '-1'}, {'indent': '+1'}],
    [{'direction': 'rtl'}],
    [{'size': ['small', false, 'large', 'huge']}],
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],
    [{'font': []}],
    [{'align': []}],
    ['link', 'image', 'video'],
    ['clean']
  ]
  export default {
    name: 'UEditor',
    props: {
      id: {
        type: String
      },
      config: {
        type: Object
      }
    },
    data () {
      return {
        editor: null,
        quillUpdateImg: false,
        serverUrl: this.$http.adornUrl(`/ueditor/uploadImg?token=${this.$cookie.get('token')}`),
        detailContent: '',
        editorOption: {
          placeholder: '',
          theme: 'snow',
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('#quill-upload input').click()
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        }
      }
    },
    methods: {
      onEditorReady (editor) { // 准备编辑器

      },
      onEditorBlur () {}, // 失去焦点事件
      onEditorFocus () {}, // 获得焦点事件
      onEditorChange () {}, // 内容改变事件
      clearUEContent: function () {
        this.detailContent = ''
      },
      getUEContent: function () {
        return this.detailContent
      },
      setUEContent: function (content) {
        this.detailContent = content
      },
      beforeUpload () {
        this.quillUpdateImg = true
      },

      uploadSuccess (res, file) {
        let quill = this.$refs.myQuillEditor.quill
        if (res.code === 0) {
          let length = quill.getSelection().index
          quill.insertEmbed(length, 'image', res.data)
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        this.quillUpdateImg = false
      },
      uploadError () {
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }
    }
  }
</script>
